<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>drag拖动</title>
  <style>
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }

    main {
      width: 100vw;
      height: 100vh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      place-items: center;
      background-color: hsl(0deg, 0%, 10%);
    }

    .draggable-container {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
    }

    .draggable,
    .droppable {
      border-radius: 4px;
    }

    .draggable {
      width: 25vw;
      height: 25vw;
      background: #00d9ff;
    }

    .droppable {
      width: 30vw;
      height: 30vw;
      border: 8px dashed #00d9ff;
      position: relative;
      display: grid;
      place-items: center;
    }

    .droppable::before {
      content: "请拖动到此区域";
      display: block;
      color: white;
      font-family: sans-serif;
      font-size: 3vw;
      color: hsl(0, 0%, 30%);
    }

    .droppable img {
      width: 80%;
      height: 80%;
      object-fit: contain;
    }

    .dragover {
      border: 8px dashed #ffae00;
    }

    .dropped {
      border: 8px dashed #48ff00;
    }

    .droppable::before {
      z-index: -1;
    }
  </style>
</head>

<body>
  <main>
    <div class="dragable-container">
      <div id="draggable" class="draggable" draggable="true"></div>
    </div>
    <div id="droppable" class="droppable"></div>
  </main>
  <script>
    const draggable = document.getElementById("draggable")
    const droppable = document.getElementById("droppable")

    draggable.addEventListener('dragstart', handleDragStart)
    function handleDragStart(e) {
      console.log(e);
      e.dataTransfer.setData("text/plain", e.target.id)
    }

    droppable.addEventListener("dragover", handleDragover)
    function handleDragover(e) {
      e.preventDefault()
      // console.log(e);
      droppable.classList.add("dragover")
    }


    droppable.addEventListener('dragleave', handleDropLeave)
    function handleDropLeave(e) {
      console.log(e);
      droppable.classList.remove("dragover")
    }

    droppable.addEventListener("drop", handleDrop)
    function handleDrop(e) {
      e.preventDefault()

      const draggedId = e.dataTransfer.getData("text/plain")
      droppable.appendChild(document.getElementById(draggedId))
      droppable.classList.add('dropped')
    }


  </script>
</body>

</html>